<template>
       <h2>跟踪记录</h2>
       <el-icon :size="100"><Van /></el-icon><br><span>合同编号：{{he.contractNumber}}</span><br>
       <span>收货地址：{{use.endAddress}}({{use.endCity}})</span>
    
     <div style="height: 300px; max-width: 600px">
    <el-steps direction="vertical" :active="1">
      <el-step title="" />  【{{use.endCity}}】货物已在【{{ use. endAddress}}】签收
 <br>
 签收人：{{use.cargoOwnerName}}<br>
 您的货物已经妥投，感谢在本次合作中的支持，期待再次为您服务.
<br>
 {{he.createdDate}}
           <el-step title="" />
        【{{use.endCity}}】货物已送达【{{ use. endAddress}}】
 <br>
 车牌号：A88888<br>  
 {{he.createdDate}}



      <el-step title="" />
        【{{use.startingProvince}}】货物已在【{{ use.startingPointAddress }}】    
    提货 <br>
    车牌号：A88888<br>  
    {{he.createdDate}}

      <el-step title="合同已审批"/> 
       承运商：{{he.unit}}<br>
 经办人{{he.personCharge}}<br> 
 {{he.createdDate}}<br>
    <el-step title="合同已创建"  />
 承运商：{{he.unit}}<br>
 经办人{{he.personCharge}}<br> 
 {{he.createdDate}}<br>

    </el-steps>
  </div>
</template>
    
<script setup lang='ts'>
   import axios from 'axios';
   import { Van} from '@element-plus/icons-vue'
   import {  ref } from 'vue'
   import{useRouter,useRoute} from 'vue-router'
   const route = useRoute()
   console.log(route.query.linenames)
   console.log(route.query.id)
  import { onMounted } from 'vue';
  onMounted(()=>{
     baskefill()
     basehe()

  })
  const use=ref([])
  const baskefill = () =>{
    axios.get("/bread/api/Lines/GetByLine", {
          params: {
        LineName: route.query.linenames
      }
    }).then((res) => {

      use.value = res.data.data[0]
      console.log(use.value)

     
    }
  )
  }
  const he=ref({})
const basehe = () =>{
  axios.get('/hread/api/ContractRead/BackfillTshowContract', {
        params: {
          ContractId: route.query.id
        }
      }).then(res => {
 he.value = res.data.data
  console.log(res.data.data)
 })
}

</script> 
    
